<template>
  <el-container>
    <el-header>资金记录</el-header>
    <el-main>
      <el-header style="display: flex; justify-content: space-around">
        <div style="display: flex">
          昵称/ID：
          <div>
            <el-input v-model="name" placeholder="请输入昵称/ID"></el-input>
          </div>
        </div>
        <div style="display: flex">
          时间范围：
          <div>
            <el-date-picker
              v-model="data"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
        <div style="display: flex">
          筛选类型：
          <div>
            <el-select v-model="value" placeholder="请选择"> </el-select>
          </div>
        </div>
      </el-header>

      <el-header>
        <el-button type="primary" @click="dian">
          <i class="el-icon-search"></i>
          搜索</el-button
        >
      </el-header>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="uid" label="用户ID"></el-table-column>

        <el-table-column prop="nickname" label="昵称"></el-table-column>

        <el-table-column prop="number" label="金额" sortable>
            <template slot-scope="scope">
                <p v-if="scope.row.pm==0" style="color:red">
                    {{-scope.row.number}}
                </p>
                <p v-else-if="scope.row.pm==1">
                    {{scope.row.number}}
                </p>
            </template>
        </el-table-column>

        <el-table-column prop="title" label="类型"></el-table-column>

        <el-table-column prop="mark" label="备注"></el-table-column>

        <el-table-column prop="add_time" label="创建时间"></el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
import { Table } from "../api/MoneyRecord";
import mom from "moment";
export default {
  data() {
    return {
      name: "",
      data: null,
      date1: "",
      date2: "",
      tableData: [],
    };
  },
  created() {
    Table({
      page: 1,
      limit: 20,
      nickname: this.name,
      start_time: this.date1,
      end_time: this.date2,
    }).then((res) => {
      console.log(res.data);
      this.tableData = res.data.data.data;
    });
  },

  methods: {
    dian() {
      //   if (this.data.length) {
      //     this.date1 = mom(this.data[0] * 1).format("YYYY-MM-DD");
      //     this.date2 = mom(this.data[1] * 1).format("YYYY-MM-DD");
      //   }
      console.log(this.data);
      if (this.data == null) {
        Table({
          page: 1,
          limit: 20,
          nickname: this.name,
          start_time: "",
          end_time: "",
        }).then((res) => {
          console.log(res.data);
          this.tableData = res.data.data.data;
        });
      } else {
        this.data[0] = mom(this.data[0] * 1).format("YYYY-MM-DD");
        this.data[1] = mom(this.data[1] * 1).format("YYYY-MM-DD");
        console.log(this.data);

        Table({
          page: 1,
          limit: 20,
          nickname: this.name,
          start_time: this.data[0],
          end_time: this.data[1],
        }).then((res) => {
          console.log(res.data);
          this.tableData = res.data.data.data;
        });
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.el-header,
.el-footer {
  background-color: white;
  color: #333;
  line-height: 60px;
}

.el-main {
  background-color: #b3c0d1;
  color: #333;
  //   line-height: 160px;
}
</style>